<template>
  <div class="signup">
    <div class="head">
      <mt-header :title="title">
        <router-link to="/" slot="left">
          <mt-button icon="back"></mt-button>
        </router-link>
      </mt-header>
    </div>
    <div class="content">
      <div class="imgs">
        <img src="../assets/classdetail_02.png" alt />
      </div>
      <div class="con">
        <h2>班主任带班能力快速提升研讨班</h2>
        <p>
          <span class="spn">
            <img src="../assets/Field-time@2x.png" alt />
          </span>
          <span>培训时间：2019-9-25 ~ 2019-12-25 （90天）</span>
        </p>
        <p>
            <span class="spn"><img src="../assets/loca_03.png" alt=""></span>
            <span>培训地点：郑州市</span>
        </p>
        <p>
            <span class="spn"><img src="../assets/copy3.png" alt=""></span>
            <span>培训形式：观摩学习，集中面授</span>
        </p>
      </div>
      <div class="peixun">
          <p>培训负责人：刘德德</p>
          <p>联系电话：15000136069</p>
          <p>截止时间：2019年10月9日 12：00</p>
      </div>
      <div class="ipt_type">
          <ul>
              <li><input type="text" placeholder="请输入您的姓名"></li>
              <li><input type="text" placeholder="请输入您的手机号码"></li>
          </ul>
      </div>
      <div class="btn">
          提交
      </div>
      
    </div>
  </div>
</template>

<script>
export default {
  name: "signup",
  data() {
    return {
      title: "好老师学院报名"
    };
  }
};
</script>

<style lang="less" scoped>
@family:AlibabaPuHuiTiR;
.signup {
  width: 100%;
  font-size: 0;
  background-color: #f8f8f8;
    position: relative;
    height: 13.34rem;
  .mint-header {
    background-color: #fff;
    color: rgb(49, 49, 49);
    font-family: AdobeHeitiStd-Regular;
    font-size: 0.3rem;
    height: 1rem;
  }
  .content {
    width: 100%;
    background-color: #fff;
    .imgs {
      width: 100%;
      height: 4.08rem;
      img {
        width: 100%;
      }
    }
    .con{
        padding: 0.35rem 0.2rem 0;
        box-sizing: border-box;
        h2{
            font-size: 0.36rem;
            font-family: @family;
            color:rgb(49, 49, 49);
            font-weight: 400;
            letter-spacing: 1px;
            margin-bottom: 0.3rem;
        }
        p{
            font-size: 0.24rem;
            font-family: @family;
            color:rgb(115,116,119);
            line-height: 0.4rem;  
            span{
                display: inline-block;
               &.spn{
                   width: 0.27rem;
                   height: 0.3rem;
                   margin-right:0.15rem;
                   img{
                       width: 100%;
                   }
               }
            }  
        }
    }
    .peixun{
        padding: 0.5rem 0.2rem 0; 
        box-sizing: border-box;
        p{
           font-size: 0.26rem;
            font-family: @family;
            color:rgb(115,116,119);
            line-height: 0.35rem; 
            letter-spacing: 1px;  
            line-height: 0.48rem;
        }
    }
    .ipt_type{
        margin-top:0.2rem;
        background-color: #fff;
        padding-left: 0.2rem;
        box-sizing: border-box;
        li{
            height: 0.95rem;
            line-height: 0.95rem;
            input{
                 width: 100%;
                 height: 95%;
                 background-color: transparent;
            }
            &:nth-child(2){
                border-top:1px solid #c6c6c6;
                margin-top:5px;
            }
        }
    }
    .btn{
        width: 100%;
        height: 0.9rem;
        line-height: 0.9rem;
        color:#fff;
        background-color: #ed1a21;
        font-family: @family;
        font-size: 0.3rem;
        text-align: center;
        position: absolute;
        bottom: 0;
        left:0;
    }
   
    
    
   
  }
}
</style>